<template>
  <!-- 背景图 -->
  <img :src="backgroundImg" alt="">
  <!-- 搜索栏wrap -->
  <div class="search_wrap">
    <!-- 搜索框 -->
    <input type="text" placeholder="使用bing搜索" ref="search">
    <!-- <a href="https://www.baidu.com">123421124</a> -->
    <div ref="search_btn">
      <!-- 搜索图标，来自bing -->
      <svg viewBox="0 0 25 25">
        <!-- 通过改变前俩元素的描边来更改图标颜色 -->
        <path stroke-width="2.5" stroke-linecap="round" stroke-miterlimit="10" fill="none" d="M23.75 23.75l-9-9"></path>
        <circle stroke-width="2.5" stroke-linecap="round" stroke-miterlimit="10" cx="9" cy="9" r="7.75" fill="none">
        </circle>
        <path fill="none" d="M25 25h-25v-25h25z"></path>
      </svg>
    </div>
  </div>
  <!-- 用户收藏的网址 -->
  <div class="user_collection">

  </div>
</template>

<script setup>
import { onMounted, shallowRef, ref } from 'vue';

const backgroundImg = shallowRef('')
const search = ref(null)
const search_btn = ref(null)

onMounted(() => {
  backgroundImg.value = localStorage.getItem('bingImg')
  search.value.addEventListener('keyup', event => {
    switch (event.key) {
      case 'Enter':
        window.open('https://cn.bing.com/search?q=' + encodeURI(search.value.value))
        break
    }
  })
  search_btn.value.onclick = () => window.open('https://cn.bing.com/search?q=' + encodeURI(search.value.value))
})


window.addEventListener('resize', event => {
  $(search.value).css({
    left: `calc(50% - ${$(search.value).width() / 2}px)`
  })
})


window.addEventListener('message', event => {
  event.data.type == 'backgroundImg' && (() => {
    const msg = JSON.parse(event.data.res)
    backgroundImg.value = 'https://cn.bing.com/' + msg.images[0].url
    /* window.wss.config()
      .then(config => {
        ws(config.cmd.port, {
          type: 'url2base64',
          url: backgroundImg.value
        })
          .then(wss => {
            backgroundImg.value = wss.msg.msg
            console.log(wss.msg.msg);
            localStorage.setItem('bingImg', backgroundImg.value)
            wss.close()
          })
      }) */
  })()
  try {
  } catch { }
})
</script>

<style lang="less">
* {
  padding: 0;
  margin: 0;
  -webkit-user-drag: none;
}

html {
  font-size: 24px;
}

body {
  background: #fff;
}

img {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 图片自适应缩放 */
}

.search_wrap {
  display: flex;
  position: fixed;
  top: 24%;
  left: calc(50% - 12rem);
  width: 24rem;
  height: 1.6rem;
  max-width: 80%;
  border-radius: 1rem;
  overflow: hidden;
  background: #fff;

  z-index: 1;

  input {
    width: 90%;
    height: 100%;
    border: none;
    outline: none;
    font: 400 0.72rem auto;
    text-indent: 1em;
  }

  div {
    cursor: pointer;
    display: flex;
    width: 10%;
    height: 100%;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;

    &:hover {
      background: #02a5e056;

      svg {
        stroke: #00b03d;
      }
    }

    svg {
      width: 70%;
      height: 70%;
      stroke: #007DAA;

      :last-child {
        stroke: none !important;
      }
    }
  }
}
</style>